<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/context/mytags.jsp"%>
<div style="padding-top:5px;">
	<a class='myBtn roundBorder' onclick="addDevice()">添加机床</a>
	<table class="commonTable" id='deviceTable'>
		<thead>
			<tr>
				<th>机床编号</th><th>机床名称</th><th>负责教师</th>
				<th>型号</th><th>规格</th><th>操作</th>
			</tr>
		</thead> 
		<tbody>
	 		<c:forEach items="${deviceList}" var="d">
	 			<tr id="labdevice${d.id}">
	 				<td>${d.machineNo}</td>
	 				<td>${d.machineName}</td>
	 				<td>${d.teacher.realName}</td>
	 				<td>${d.model }</td>
	 				<td>${d.spec }</td>
	 				<td>
	 					<a href='javascript:void(0)' onclick='modlabdevice("${d.id}")'>修改</a>&nbsp;
						<a href='javascript:void(0)' onclick='deletelabdevice("${d.id}")'>删除</a>
					</td>
	 			</tr>
	 		</c:forEach>
		</tbody>
	</table> 
</div>
<script>
	var deviceList = new Array(); //新增或者修改的员工列表
	var deleteDeviceList = new Array(); //删除的员工列表
	var deviceCount = 0;
	function addDevice(staffId){
		
		var url = "expCenterTabController.do?deviceTabEdit";
		if(staffId != undefined && staffId.length >10){
			url += "&id="+staffId;
		}

		$.dialog({
			  	id:'xxx',
				content: 'url:'+url,
				lock : true,
				zIndex: getzIndex(), 
				parent:frameElement.api,
				width:480,
				height:350,
				title:'添加机床', 
				opacity : 0.3,
				cache:false,
			    ok: function(){
			    	iframe = this.iframe.contentWindow;
			    	var staff = iframe.getDevice();
			    	if(staff == null) return false;
			    	handleAddDevice(staff);
			    },
			    cancelVal: '关闭',
			    cancel: true /*为true等价于function(){}*/
		});
	}
	
	function handleAddDevice(staff){
		console.log(staff)
		var index = isdeviceListExist(staff.id);
		console.log('index:'+index)
		if(index != -1){ //更新 替换
			deviceList[index] = staff;
			
		}else{ //新增

			if(staff.id.length < 10){
				staff.id=deviceCount+"";
			}
			deviceList[deviceCount] = staff;
	 		deviceCount++;
		}
		
		updateDeviceTableRow(staff); 
		
	}
	
	//修改（新增）员工后，table中更新记录
	function updateDeviceTableRow(staff){
		var id = staff.id;
 		
		if($('#labdevice'+staff.id).length > 0){
			$('#labdevice'+staff.id).html('');
		}else{
			$('#deviceTable tbody').append("<tr id='labdevice"+id+"'></tr>");
		}
		
		//添加一行
		$('#labdevice'+staff.id).append(
		"<td>"+staff.machineNo+"</td>"+
		"<td>"+staff.machineName+"</td>"+
		"<td>"+staff.teacherName+"</td>"+
		"<td>"+staff.model+"</td>"+
		"<td>"+staff.spec+"</td>"+
		"<td><a href='javascript:void(0)' onclick='modlabdevice(\""+id+"\")'>修改</a>&nbsp;"+
		"<a href='javascript:void(0)' onclick='deletelabdevice(\""+id+"\")'>删除</a></td>");
	} 
	
	
	function deletelabdevice(id){
		$('#labdevice'+id).remove();
		for(var i =0;i<deviceList.length;i++){
			if(deviceList[i] != null && deviceList[i].id == id){
				deviceList[i] = null;
			}
		}
		
		if(id.length > 10){ //非临时id，才保存，传给服务器删除
			deleteDeviceList.push(id);
		}
		
	}
	
	var currentModDevice;
	function modlabdevice(id){
		if(id.length < 10){ //id长度小于10位表示是临时id
			currentModDevice = getDeviceFromList(id) ; 
		}else{
			currentModDevice = {id:id};	
		}
		 
 		
		addDevice(id);
	}
	
	function getDeviceFromList(id){
		for(var i =0;i<deviceList.length;i++){
			if(deviceList[i] != null && deviceList[i].id == id){
				return deviceList[i];
			}
		}
		return null;
	}
	
	/**
	* 判断员工修改新增数组中是否存在此条记录
	*/
	function isdeviceListExist(id){
		console.log("prepare find is exist:"+deviceList)
		
		for(var i =0;i<deviceList.length;i++){
			if(deviceList[i] != null && deviceList[i].id == id){
				console.log("deviceList[i].id="+deviceList[i].id);
				console.log("target id:"+id)
				console.log(deviceList[i].id == id);
				return i;
			}
		}
		return -1;
	}
</script>

<style>

</style>